<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本水平对齐和单行文本垂直居中</title>
    <style>
        .box1{
            /* left，center，right */
            text-align: center;
            width: 500px;
            background: yellow;
        }
        .box2{
            text-align: justify;
            /* justify两端对齐 ，多行文本用*/
            width: 500px;
            background: rgb(72, 255, 0);
        }
        .box3{
            width: 500px;
            height: 100px;
            background-color: yellow;
            line-height:100px ;
            text-align: center;
        }
        .box4{
            width: 500px;
            height: 100px;
            background-color: rgb(0, 247, 255);
            line-height: 16px;
            /*  line-height 文本行高间距 默认16px */
        }
    </style>
</head>
<body>
    <div class="box1">大家好</div>
    <div class="box2">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi veritatis laudantium aperiam amet deserunt, commodi cupiditate. Rem quos corrupti fugiat repellat, voluptate est, ullam suscipit error labore sed officia dolorum.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem facilis ratione atque laborum at, sunt modi, optio libero aperiam laudantium quia totam, eligendi in maxime necessitatibus hic nesciunt? Facilis, labore?
    </div>
    <div class="box3"> 
        大家好
    </div>
    <div class="box4">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam nulla, beatae dolore commodi hic similique culpa corporis earum, error reiciendis cum excepturi odit omnis nemo neque? Distinctio nemo accusantium rem.
    </div>
</body>
</html>